<template>
  <div style="display: grid; place-items: center;">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>商品详情</span>
          </div>
        </template>
        <div v-for="(value,key) in item" :key="key" class="text item">{{ key }}:{{ value }}</div>
        <el-button type="primary" class="button" @click="alipayBuy">点击购买</el-button>
      </el-card>
  </div>
</template>
 
<script>
import request from '../utils/request';
import Socket from '../components/Header.vue'
export default {
  data() {
    return {
      item:null,
    };
  },
  created() {
    // 通过动态路由和拼接字符串形式都需要通过 路由对象 获取id的值
    const id = this.$route.query.id;
    request.get("/goods/" + id).then(res => {
      this.item = res.data;
    })
  },
  methods:{
    alipayBuy(){
      window.open('http://localhost:8081/alipay/pay?traceNo=' + this.item.id + "&totalAmount=" + this.item.price + '&subject=' + this.item.goodsName + '&token=' + sessionStorage.getItem("token"))
      console.log(sessionStorage.getItem("token"))
      this.$message.success("请求支付宝成功")
    }
  }
}
</script>
 
<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}
</style>